<template>
	<view v-if="showDom" :class="['fixed scale']" :style="[
      pos.left !== null ? { left: pos.left + 'px' } : '',
      pos.right !== null ? { right: pos.right + 'px' } : '',
      pos.top !== null ? { top: pos.top + 'px' } : '',
      pos.bottom !== null ? { bottom: pos.bottom + 'px' } : '',
      pos.width !== null ? { width: pos.width + 'px' } : '',
      props.shadow ? { padding: props.shadow * 4 + 'rpx' } : '',
    ]">
		<zh-sheet @click="emits('click', $event)" :color="color_com" :_class="_class" :_style="_style"
			:followTheme="props.followTheme" :dark="props.dark" :round="props.round" :shadow="props.shadow"
			:outlined="props.outlined" :border="props.border" :borderStyle="props.borderStyle"
			:borderDirection="props.borderDirection" :text="props.text" :transprent="props.transprent"
			:linear="props.linear" :linearDeep="props.linearDeep" :margin="props.margin" :padding="props.padding">
			<slot>
				<view class="flex flex-row flex-row-center-between relative">
					<view class="flex flex-1 flex-row overflow flex-row-center-start">
						<tm-icon _class="pr-10" :fontSize="26" :name="icon_str"></tm-icon>
						<slot>
							<zh-text _class="text-overflow-1" :label="label_str"></zh-text>
						</slot>
					</view>
					<view class="pl-24 pr-12 flex flex-center" style="width: 0rpx">
						<tm-icon @click="hide" :fontSize="24" name="tmicon-times"></tm-icon>
					</view>
				</view>
			</slot>
		</zh-sheet>
	</view>
</template>

<script lang="ts" setup>
	/**
 * 通知提醒
 * @description 通知提醒,总共四个角和上下，6个位置的提醒,使用时请注意内容变动即可显示。如果想一开始不想显示，不要提供内容就行。
 */

	import { custom_props } from '@/tool/lib/minxs';
	import { getCurrentInstance, computed, ref, provide, inject, onUpdated, onMounted, onUnmounted, nextTick, watch, PropType, watchEffect } from 'vue';
	import { showOpts } from './interface';
	import { useWindowInfo } from '@/tool/useFun/useWindowInfo'
	const emits = defineEmits(['click', 'close']);
	const proxy = getCurrentInstance()?.proxy ?? null;
	const tranmatioan = ref<any>(null);
	const props = defineProps({
		...custom_props,
		followTheme: {
			type: [Boolean],
			default: true,
		},
		transprent: {
			type: [Boolean],
			default: false,
		},
		border: {
			type: [Number],
			default: 0,
		},
		round: {
			type: [Number],
			default: 2,
		},
		shadow: {
			type: [Number],
			default: 0,
		},
		margin: {
			type: Array as PropType<Array<number>>,
			default: () => [0, 0],
		},
		padding: {
			type: Array as PropType<Array<number>>,
			default: () => [24, 16],
		},
		//多少秒后消失。0表示永不消失。
		duration: {
			type: Number,
			default: 2000,
		},
		offset: {
			type: Array as PropType<Array<number>>,
			default: () => [32, 32], //x,y
		},
		//位置
		placement: {
			type: String,
			default: 'topLeft', //topLeft|topRight|bottomLeft|bottomRight|top|bottom
		},
		label: {
			type: String,
			default: '',
		},
		icon: {
			type: String,
			default: 'tmicon-info-circle-fill',
		},
	});
	const sysinfo = useWindowInfo()
	let windowBottom = computed(() => sysinfo.bottomSafe);
	let windowTop = computed(() => sysinfo.topSafe);
	let windowWidth = computed(() => sysinfo.width);
	let uid : number = NaN;
	const showDom = ref(false);
	const label_str = ref(props.label);
	const icon_str = ref(props.icon);
	const pos = computed(() => {
		if (props.placement == 'topLeft') {
			return {
				top: windowTop.value + uni.upx2px(props.offset[1]),
				left: uni.upx2px(props.offset[0]),
				right: null,
				bottom: null,
				width: null,
			};
		}
		if (props.placement == 'topRight') {
			return {
				top: windowTop.value + uni.upx2px(props.offset[1]),
				left: null,
				right: uni.upx2px(props.offset[0]),
				bottom: null,
				width: null,
			};
		}
		if (props.placement == 'bottomLeft') {
			return {
				top: null,
				left: uni.upx2px(props.offset[0]),
				right: null,
				bottom: windowBottom.value + uni.upx2px(props.offset[1]),
				width: null,
			};
		}
		if (props.placement == 'bottomRight') {
			return {
				top: null,
				left: null,
				right: uni.upx2px(props.offset[0]),
				bottom: windowBottom.value + uni.upx2px(props.offset[1]),
				width: null,
			};
		}
		if (props.placement == 'top') {
			return {
				top: windowTop.value + uni.upx2px(props.offset[1]),
				left: uni.upx2px(props.offset[0]),
				right: null,
				bottom: null,
				width: windowWidth.value - uni.upx2px(props.offset[0]) * 2,
			};
		}
		if (props.placement == 'bottom') {
			return {
				top: null,
				left: uni.upx2px(props.offset[0]),
				right: null,
				bottom: windowBottom.value + uni.upx2px(props.offset[1]),
				width: windowWidth.value - uni.upx2px(props.offset[0]) * 2,
			};
		}
		return {
			left: null,
			right: null,
			bottom: null,
			width: null,
			top: null,
		};
	});
	const color_com = ref(props.color);
	watchEffect(() => {
		color_com.value = props.color;
	});
	onMounted(() => {
		label_str.value = props.label;
		icon_str.value = props.icon;
	});
	onUnmounted(() => {
		clearTimeout(uid);
	});
	//手动显示
	function show(arg : showOpts) {
		let { icon, label, duration } = arg || {};
		label_str.value = label || props.label || '';
		icon_str.value = icon || props.icon || '';
		color_com.value = (arg?.color ?? color_com.value) || color_com.value;
		duration = typeof duration === 'undefined' ? props.duration || 0 : duration;
		if (showDom.value || !isNaN(uid)) {
			showDom.value = false;
			clearTimeout(uid);
			nextTick(() => {
				showDom.value = true;
				if (!duration) return;
				uid = setTimeout(function () {
					showDom.value = false;
				}, duration);
			});
		} else {
			showDom.value = true;
			if (!duration) return;
			uid = setTimeout(function () {
				showDom.value = false;
			}, duration);
		}
	}
	//手动隐藏。
	function hide() {
		showDom.value = false;
		clearTimeout(uid);
		emits('close');
	}

	defineExpose({ show: show, hide: hide });
</script>

<style scoped>
	.scale {
		/* #ifndef APP-NVUE */
		animation: aniscale 0.3s;
		z-index: 500 !important;
		/* #endif */
	}

	/* #ifndef APP-NVUE */
	@keyframes aniscale {
		0% {
			opacity: 0;
			transform: scale(0.7, 0.7);
		}

		100% {
			opacity: 1;
			transform: scale(1, 1);
		}
	}

	/* #endif */
</style>